<template>
  <el-container>
    <el-header>
      <el-menu
          style="margin-left: 0;margin-right: 0"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-row>
          <el-col :span="4"><h1 align="center">电影订票管理系统</h1></el-col>
          <el-col :span="2"><el-menu-item index="1" @click="$router.push('/')"  align="center">首页</el-menu-item></el-col>
          <el-col :span="2"><el-menu-item index="2" @click="$router.push('/center')" align="center">个人中心</el-menu-item></el-col>
          <el-col :span="12"><b>&nbsp</b></el-col>
          <el-col :span="2">
            <el-menu-item v-if="islogined" index="3" @click="$router.push('/center')" align="center">{{ nickname }}</el-menu-item>
            <el-menu-item v-else index="3" @click="logout();$router.push('/login')" align="center">登录</el-menu-item>
          </el-col>
          <el-col :span="2">
            <el-menu-item v-if="islogined" index="4" @click="logout();$router.push('/login')"  align="center">登出</el-menu-item>
            <el-menu-item v-else index="4" @click="$router.push('/register')"  align="center">注册</el-menu-item>
          </el-col>
        </el-row>
      </el-menu>
    </el-header>

    <el-main>
      <!--<h1 align="center">{{ movieName }}</h1>
      <h1 align="center">{{ movi.movieName }}</h1>
      <h3 align="center">时长：{{movi.length}}</h3>
      <h3 align="center">标准票价：{{movi.cost}}</h3>
      <h5 align="center">主演: {{movi.actors}}</h5>
      <h5 align="center">导演：{{movi.director}}</h5>
      <h5 align="center">语言：{{movi.language}}</h5>-->
      <h1 align="center">{{ movieName }}</h1>
      <h3 align="center">时长：{{length}}</h3>
      <h3 align="center">标准票价：{{cost}}</h3>
      <h5 align="center">主演: {{actors}}</h5>
      <h5 align="center">导演：{{director}}</h5>
      <h5 align="center">语言：{{language}}</h5>

      <br>
      <div>
        <img src="../assets/xsb.jpg" style="margin-left: 500px">
      </div>
      <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%">
        <el-table-column
            prop="scheduleid"
            v-if="false"
            label="scheduleid"
        >
        </el-table-column>
        <el-table-column
            prop="date"
            label="时间"
            width="400">
        </el-table-column>
        <el-table-column
            prop="hall"
            label="影厅"
            width="180">
        </el-table-column>
        <el-table-column
            prop="ammount"
            label="剩余票数">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
          <el-button v-if="islogined" type="primary" @click="buy(scope.row.scheduleid,user.userId);dialogbuyticket = true">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="请选择座位" :visible.sync="dialogbuyticket">
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogbuyticket = false">取 消</el-button>
    <el-button type="primary" @click="dialogbuyticket = false">确 定</el-button>
  </span>
      </el-dialog>
    </el-main>
  </el-container>

</template>

<script>
import request from "@/utils/request";

export default {
  name:"details",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      //movi:localStorage.getItem("movi") ? JSON.parse(localStorage.getItem("movi")) : {},
      //movieName:localStorage.getItem("movieName"),
      activeIndex: '1',
      dialogbuyticket: false,
      islogined:false,
      nickname: '',
      tableData: [],
      movieName:localStorage.getItem("movieName"),
      length:localStorage.getItem("length"),
      cost:localStorage.getItem("cost"),
      actors:localStorage.getItem("actors"),
      director:localStorage.getItem("director"),
      language:localStorage.getItem("language"),

    };
  },
  created() {
    //this.gethall()
    //this.getUser()
    this.getmov()
    this.gethall()
    this.getUser()

  },
  methods: {
    getmov(){
      request.post("/analyse/mov",{
        movieName:this.movieName
      }).then(res=>{
        this.movieId=res.data.movieId,
            this.length=res.data.length,
            this.cost=res.data.cost,
            this.actors=res.data.actors,
            this.director=res.data.director,
            this.language=res.data.language
      })
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout(){
      localStorage.removeItem('user');
      localStorage.removeItem('islogin');
    },
    buy(rowdata,userId){
    request.post("/analyse/buy",{
      scheduleid:rowdata,
      userid:userId,
    }).then(res=>{
      this.$message({message:res.message,type:'success'})
    })
    },
    gethall(){
      request.post("/analyse/ticket",{
      movieId:this.movi.movieId
      }).then(res=>{
        this.tableData=res.data;
      })
    },
    getUser(){
      let nickname = this.user.nickname;
      let islogin =localStorage.getItem('islogin');
      if(islogin == '1')
      {
        this.islogined = true;
        this.nickname= nickname;
      }
    },
  }
}
</script>
